<template>
  <!-- //! 车型列表的样式 -->
  <!-- //! 车型列表的样式 -->
  <!-- //! 车型列表的样式 -->
  <!-- //! 车型列表的样式 -->
  <!-- //! 车型列表的样式 -->

  <div class="branches">
    <div class="app-container">
      <!-- 上 -->
      <div class="top background">
        <div id="topForm">
          <el-form id="searchForm" label-position="right" label-width="80px">
            <div id="elForm">
              <el-form-item label="车牌类型">
                <el-select v-model="searchForm.truckTypeId" placeholder="请选择" style="width:323px">
                  <el-option
                    v-for="item in carType"
                    :key="item.index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div id="elForm">
              <el-form-item label="车牌号码">
                <el-input v-model="searchForm.licensePlate" />
              </el-form-item>
            </div>
            <div id="elForm">
              <el-button type="primary" style="flex-shrink: 0; flex: none;" @click="searchCar">搜索</el-button>
              <el-button type="primary" style="flex-shrink: 0; flex: none;" @click="resetSearch">重置</el-button>
            </div>

          </el-form>

        </div>
      </div>
      <!-- 中 -->
      <div id="middle">
        <div id="tab-item" style="font-size: 14px;">
          <el-button type="text" @click="allLIst">全部 {{ all }}</el-button>
        </div>
        <div id="tab-item" style="font-size: 14px;">
          <el-button type="text" @click="enableList">可用 {{ enable }}</el-button>

        </div>
        <div id="tab-item" style="font-size: 14px;">
          <el-button type="text" @click="disableList">停用 {{ disable }}</el-button>

        </div>
      </div>
      <!-- 下 -->
      <div class="button background">
        <div id="form2">
          <!-- 按钮 -->
          <el-button type="primary" style="margin-bottom:20px" @click="showDialog">新增车辆</el-button>
          <!-- 表单 -->
          <el-table
            stripe
            style="width: 100%"
            :data="carList"
          >
            <el-table-column
              type="index"
              label="序号"
              width="100"
            />
            <el-table-column
              prop="licensePlate"
              label="车牌号码"
              width="180"
            />
            <el-table-column
              prop="truckTypeName"
              label="车辆类型"
            />
            <el-table-column
              prop="driverNum"
              label="司机数量"
            />
            <el-table-column
              prop="workStatus"
              label="车辆状态"
            >
              <template v-slot="{row}">
                <span v-if="row.workStatus===0"> <span class="dot1" />停用</span>
                <span v-else> <span class="dot" />可用</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="deviceGpsId"
              label="GPS设备ID"
            />
            <el-table-column
              prop="allowableLoad"
              label="实载重量（T）"
            />
            <el-table-column
              prop="allowableVolume"
              label="实载体积（方）"
            />
            <el-table-column
              prop="address"
              label="操作"
              width="200"
              align="center"
            >
              <template v-slot="{row}">
                <el-button
                  type="text"
                  size="small"
                  @click="$router.push({path: '/transit/vehicle-detail',query:{id:row.id,formUrlName: '车辆管理'} })"
                >查看详情 |</el-button>
                <template>
                  <el-button v-if="row.workStatus === 1" type="text" size="small" @click="disableCar(row.id)">停用 </el-button>
                  <el-button v-else style="color: red;" type="text" size="small" @click="startCar(row.id)">启用 </el-button>
                  <span> | </span>
                </template>
                <el-button
                  type="text"
                  size="small"
                  @click="enableDriver(row.id)"
                >配置司机</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div id="demonstration">
            <el-pagination
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="parseInt(total)"
              @current-change="pageChange"
              @size-change="sizeChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 添加模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="addCarList" label-position="right" label-width="100px" :model="addCarList" :rules="rules">
        <el-form-item label="车辆类型" prop="truckTypeId">
          <el-select v-model="addCarList.truckTypeId" placeholder="请选择" style="width:323px">
            <el-option
              v-for="item in carType"
              :key="item.index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码" prop="licensePlate">
          <el-input v-model="addCarList.licensePlate" />
        </el-form-item>
        <el-form-item label="GPS设备ID" prop="deviceGpsId">
          <el-input v-model="addCarList.deviceGpsId" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quitForm">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 配置司机子组件 -->
    <driver :id="carId" :visible.sync="driverDialog" @visible="driverDialog" />
  </div>
</template>

<script>
import driver from './components/driver.vue'
import { addCarApi, disableCarApi, enableCarApi, getCarListApi } from '@/api/vehicleList'
export default {
  components: {
    driver
  },
  data() {
    return {
      carId: '', // !车辆id,用于配置司机
      driverDialog: false, // ! 司机弹窗
      listType: 0, // 究竟是哪一页
      all: '', // 全部
      enable: '', // 已使用
      disable: '', // 未使用
      showTips: false, // 提示框
      total: 0, // 总条数
      searchForm: {
        licensePlate: '', // 车牌号码
        truckTypeId: '' // 车辆类型id
      },
      carList: [], // 车辆列表
      dialogVisible: false, // 模态框
      addCarList: {
        licensePlate: '', // 车牌号码
        deviceGpsId: '', // GPS设备ID
        truckTypeId: '' // 车辆类型ID
      }, //  ? 添加车辆信息
      carType: [
        { name: '4.2米箱式货车', value: '1575066321985286145' },
        { name: '12.8米箱式货车', value: '1575257460197634049' },
        { name: '6.8米箱式货车', value: '1575257668885229569' }
      ],
      pageParams: {
        page: 1,
        pageSize: 10
      }, // 分页数据
      rules: {
        licensePlate: [
          { required: true, message: '请输入车牌号码', trigger: 'blur' },
          { min: 5, max: 7, message: '请输入正确的车牌号码', trigger: 'blur' },
          {
            trigger: 'blur',
            // 自定义校验模式
            validator: async(rule, value, callback) => {
              // value就是输入的编码
              const result = this.carList
              // result数组中是否存在 value值
              if (result.some((item) => item.licensePlate === value && item.id !== this.id)) {
                callback(new Error('部门中已经有该名称了'))
              } else {
                callback()
              }
            }
          }
        ],
        deviceGpsId: [
          { required: true, message: '请输入GPS设备ID', trigger: 'blur' }
        ],
        truckTypeId: [
          { required: true, message: '请输入车辆类型ID', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCarList()
    this.getDisableCarListApi()// 停用车辆列表
    this.getEnableCarList()// 启用车辆列表
  },
  methods: {

    // todo 渲染数据
    async getCarList() {
      const res = await getCarListApi({ ...this.searchForm, ...this.pageParams })
      console.log(res)
      this.carList = res.data.items
      // console.log(this.carList)
      this.total = res.data.counts
      this.all = res.data.counts
      this.listType = 0
    },
    // todo 点击显示模态框
    showDialog() {
      this.dialogVisible = true
    },
    // todo 点击确定提交新增或编辑表单
    async submitForm() {
      // 校验表单
      await this.$refs.addCarList.validate()
      const res = await addCarApi(this.addCarList)
      console.log(res)
      // 提示
      this.$message.success('操作成功')
      // 重置表单
      this.$refs.addCarList.resetFields()
      // 关闭模态框
      this.dialogVisible = false
      // 重新渲染数据
      this.getCarList()
    },
    // todo 取消添加
    quitForm() {
      this.$refs.addCarList.resetFields() // 重置表单
      this.dialogVisible = false
    },
    // todo 车辆搜索按钮
    async searchCar() {
      const res = await getCarListApi({ ...this.searchForm, ...this.pageParams })
      console.log(res)
      this.carList = res.data.items
      this.total = res.data.counts
    },
    // todo 重置搜索栏
    resetSearch() {
      this.searchForm.licensePlate = ''
      this.searchForm.truckTypeId = ''
      this.getCarList()
    },
    // todo 分页
    pageChange(newPage) {
      this.pageParams.page = newPage
      if (this.listType === 0) {
        this.getCarList()
      }
      if (this.listType === 1) {
        this.allLIst()
      }
      if (this.listType === 2) {
        this.disableList()
      }
    },
    // todo 每页条数改变
    sizeChange(newSize) {
      this.pageParams.pageSize = newSize
    },
    // todo 获取停用的车辆列表
    async getDisableCarListApi() {
      // const res = await getEnableCarListApi()
      const res = await getCarListApi({ ...this.searchForm, ...this.pageParams, workStatus: 0 })
      // console.log('已停用的车辆列表', res)
      this.disable = res.data.counts
    },
    // todo 获取可用车辆列表
    async getEnableCarList() {
      const res = await getCarListApi({ ...this.searchForm, ...this.pageParams, workStatus: 1 })
      // console.log('可用车辆列表', res)
      this.enable = res.data.counts
    },
    // todo 配置司机
    async enableDriver(id) {
      await this.$confirm('<strong>配置司机需满足以下条件</strong><br/><br/><div><span style="margin-right: 20px;" >1车辆信息已完善</span ><span>1车辆信息已完善</span></div><br/>', '车辆配置', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(action => {
        this.driverDialog = true
        this.carId = id
        console.log(this.carId)
      })

      // const res = await enableCarApi(id)
      // console.log(res)
    },
    //  ? 点击切换全部列表
    async allLIst() {
      const res = await getCarListApi({ ...this.searchForm, ...this.pageParams })
      // console.log(res)
      this.carList = res.data.items
      this.total = res.data.counts
      this.listType = '0' // !
      console.log(this.carList)
    },
    //  ? 点击切换可用的车辆列表
    async enableList() {
      const res = await getCarListApi({ ...this.searchForm, ...this.pageParams, workStatus: 1 })
      console.log('可用车辆列表', res)
      this.carList = res.data.items
      this.total = res.data.counts
      this.listType = 1 // !
    },
    //  ? 点击切换已停用的车辆列表
    async disableList() {
      const res = await getCarListApi({ ...this.searchForm, ...this.pageParams, workStatus: 0 })
      // console.log('已停用的车辆列表-点击', res)
      this.carList = res.data.items
      this.total = res.data.counts
      this.listType = 2 // !
      // console.log(this.listType)
    },
    // todo 启用车辆
    async startCar(id) {
      const res = await enableCarApi(id)
      console.log(res)
    },
    // todo 停用车辆
    async disableCar(id) {
      const res = await disableCarApi(id)
      console.log(res)
    }
  }
}
</script>

  <style scoped>

  .dot{
  display: inline-block;
  width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    align-items: center;
    margin:2.5px;
    margin-right: 8px;
}
.dot1{
  display: inline-block;
  width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    align-content: center;
    margin:2.5px;
    margin-right: 8px;
}
  #middle{
    background: #ffffff;
    /* height: 100px; */
    display: flex;
    margin-top: 20px;

  }
  #tab-item{
    text-align: center;
    display: flex;
    justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
    width: 120px;
    height: 48px;
  }
  /* 表单二 */
  #form2{
    padding: 20px;

  }
  #demonstration{
    text-align: center;
    margin-top: 20px;
  }
  /* 表单一 */
.flex-container{
  padding-right: 872px;
}
  #searchForm{
    display: flex;
    /* flex-wrap: wrap; */
    /* justify-content: space-between; */
    /* 居中 */
    padding-top: 20px;
  }
  .branches{
    margin-left: 20px;
    margin-right: 20px;
  }
  .background{
    background: #ffffff;
    margin-top: 25px;
  }
  /* .top{
    height: 140px;
  } */
  /* .button{
    height:700px ;
  } */
  .el-input{
    width: 323px;
  }
  #elForm{
    margin: 0 30px 0 30px;
  }
  </style>

